<template>
  <div class="activity">
    <div class="back" @touchend.stop="indexTouch"></div>
    <div class="activity-main">
      <div class="activity-left">
        <div class="activity-title" v-for="(item,index) in activity" :key="index"
          :style="activityCategoryStyle(item,index)" @touchend.stop="activityTouch(item,index)">
          <div class="name">{{item.name}}</div>
        </div>
      </div>
      <div class="activity-right">
        <div class="activity-list">
          <div class="activityBase" v-if="type === '绘本馆'">
            <img :src="'https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/activity/内容主题图片大小示意.png' "
              alt="">
            <div class="pin"></div>
            <div class="pencil"></div>
            <div class="start" @touchend="enterProduce">立即开始</div>
          </div>
          <div class="activity-close" v-if="type !== '绘本馆'">
            <div class="pin"></div>
            <div class="activity-recommend">活动暂未开启,敬请期待!</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {
      activity: [
        { name: '绘本馆', tip: '' },
        { name: '配音秀', tip: '活动暂未开启,敬请期待!' },
        { name: '热门活动', tip: '活动暂未开启,敬请期待!' },
      ],
      type: '绘本馆'
    }
  },
  created() {
    this.$set(this.activity[0], 'active', true)
  },
  computed: {
    activityCategoryStyle(item, index) {
      return function (item, index) {
        return {
          top: 13 + index * 25 + '%',
          background: item.active ? "url(" + this.variable.STATICE_URLTITLE + "activity/选中左标签.png)0 0/100% 100%"
            : "url(" + this.variable.STATICE_URLTITLE + "activity/未选中左标签.png)0 0/100% 100%",
          transform: item.active ? 'scale(1.15)' : '',
          transition: 'all 0.5s'
        }
      }
    }
  },
  methods: {
    //回到绘本列表
    indexTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/recommendList" })
        }
      })
    },
    activityTouch: function (item, index) {
      this.parseTextAudio({ play: false })
      this.clickMusic()
      this.type = item.name
      this.activity.forEach(item => { this.$set(item, 'active', false) })
      this.$set(item, 'active', true)
      if (item.tip) this.parseTextAudio({ text: item.tip })
    },
    enterProduce: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/produce" })
        }
      })
    },
    ...mapActions("mainStatus", ["setLoading"]),
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../src/common/stylus/base.styl'
.activity
  position absolute
  width 100%
  height 100%
  background url($urlTitle + 'activity/背景.png') 0 0 / 100% 100%
  .back
    background url($urlTitle + 'icon/icon-返回.png') 0 0 / 100% 100%
    transform translate(calc(0px - var(--X)), calc(0px - var(--Y)))
    $coord('WHLT', 11vh, 10.8vh, 2rem, 1.5rem)
    z-index 99
  .activity-main
    position relative
    width 152vh
    height 80vh
    margin 18vh auto 0 auto
    max-width 90vw
    max-height 55vw
    min-width 75vw
    .activity-left
      $coord('WHLT', 14%, 70%, 4%, 15%)
      .activity-title
        $coord('WHLT', 100%, 18%, 0%, 0%)
        font-size 0.5rem
        letter-spacing 0.05rem
        color white
        .name
          position absolute
          top 50%
          left 35%
          transform rotate(-8deg) translate(-35%, -50%)
    .activity-right
      $coord('WHRT', 85%, 95%, 0, 0)
      background url($urlTitle + 'activity/活动小背景.png') center center / contain no-repeat
      filter drop-shadow(-1px 0 1px rgba(159, 154, 154, 0.36))
      .activity-list
        $coord('WHLT', 76%, 72%, 7%, 20%)
        filter drop-shadow(1px 1px 2px rgba(159, 154, 154, 0.6))
        color white
        $alignCenter()
        .activityBase
          position absolute
          width 100%
          height auto
          img
            max-width 100%
            max-height 100%
          .pin
            $coord('WHRT', 1.6rem, 1.6rem, -0.8rem, 0.8rem)
            background url($urlTitle + 'activity/右装饰别针.png') 0 0 / 100% 100%
            transform rotate(-8deg)
          .pencil
            $coord('WHRB', 5rem, 5rem, -1rem, -1rem)
            background url($urlTitle + 'produce/铅笔.png') 0 0 / 100% 100%
          .start
            position absolute
            $center('WHLT', 5rem, 1.8rem)
            top 85%
            background url($urlTitle + 'newList/按钮背景.png') 0 0 / 100% 100%
            font-size 0.8rem
            font-weight 500
            letter-spacing 0.1rem
            line-height 1.8rem
            text-align center
        .activity-close
          position absolute
          min-width 90%
          min-height 90%
          max-width 100%
          max-height 100%
          background #ffc36d
          .pin
            $coord('WHRT', 1.6rem, 1.6rem, -0.8rem, 0.8rem)
            background url($urlTitle + 'activity/右装饰别针.png') 0 0 / 100% 100%
            transform rotate(-8deg)
          .activity-recommend
            position absolute
            $center('WHLT', 15rem, 3rem)
            font-size 1rem
            font-weight 500
            letter-spacing 0.1rem
            text-align center
            line-height 3rem
</style>